<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>DingDing Admin</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>

    <link th:include="includeJs::bootstrap_js"/>
    <link th:include="includeJs::layui_js"/>
</head>
<body>
<div class="container-scroller d-flex">
  <div th:replace="includeJs::admin_leftNav"></div>

  <div class="container-fluid page-body-wrapper">
      <div th:replace="includeJs::admin_nav"></div>
      <div class="main-panel">
      <div class="content-wrapper">
      <!-- 参考  -->
        <div class="row">
          <div class="col-12 col-xl-6 grid-margin stretch-card">
            <div class="row w-100 flex-grow">
              <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                  <div class="card-body">
                    <div class="chartjs-size-monitor">
                        <div class="chartjs-size-monitor-expand">
                          <div class="">

                          </div>
                        </div>
                        <div class="chartjs-size-monitor-shrink">
                          <div class="">

                          </div>
                        </div>
                      </div>
                    <div id="main" style="width: 550px;height:450px;">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-xl-6 grid-margin stretch-card">
            <div class="row w-100 flex-grow">
              <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                  <div class="card-body"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                    <div id="bid_main" style="width: 550px;height:450px;">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'),'light');
  var myBidMain = echarts.init(document.getElementById('bid_main'),'light');
  axios.get('/admin/dueEchats').then(response=>{
    // 指定图表的配置项和数据
    var option =  {
      title: {
        text: '借贷类型人数占比',
        //subtext: '纯属虚构',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['信用贷', '抵押贷', '微妙贷']
      },
      series: [
        {
          name: '借贷',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: response.data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  });

  axios.get('/backStage/bidPieChart').then(response=>{
    let bidOption = option = {
      title:{
        text: '投资类型人数占比',
        left:'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 10,
        data: response.data.title
      },
      series: [
        {
          name: '投资',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data:response.data.list
        }
      ]
    };
    myBidMain.setOption(bidOption);
  })
</script>
</html>